<template>
  <base-page-view class-name="page-container article-detail">
    <view class="detail-block">
      <view class="article-title">{{ detailData.title }}</view>
      <view class="article-num">
        <view>{{ detailData.time_desc }}</view>
        <view class="view">
          <b-image class-name="icon" src="/static/images/material/icon_view.png" mode="aspectFit" :is-asset="true" />
          {{ detailData.browse_num | formatNumber(2, true) }}
        </view>
      </view>
      <mole-rich-text :content="detailData.content"></mole-rich-text>
    </view>

    <view v-if="list.length" class="recommend-block">
      <view class="title">相关推荐</view>
      <view class="article-list">
        <template v-for="(item, index) in list">
          <template v-if="pid === 5">
            <view :key="index" class="article-item" @click="articleClick(item)">
              <b-image class-name="pic" :src="item.cover" mode="aspectFill" />
              <view class="sub-item">
                <view class="article-item_title">{{ item.title }}</view>
                <view class="article-item_num">
                  <view class="view">
                    <b-image class-name="icon" src="/static/images/material/icon_view.png" mode="aspectFit" :is-asset="true" />
                    {{ item.browse_num | formatNumber(2, true) }}
                  </view>
                  <b-image v-if="item.study_status === 1" class-name="btn" src="/static/images/material/btn_complete.png" mode="aspectFit" :is-asset="true" />
                  <b-image v-else class-name="btn" src="/static/images/material/btn_study.png" mode="aspectFit" :is-asset="true" />
                </view>
              </view>
            </view>
          </template>
          <template v-else>
            <view :key="index" class="article-item" @click="articleClick(item)">
              <view class="sub-item">
                <view class="article-item_title">{{ item.title }}</view>
                <view class="article-item_num">
                  <view>{{ item.time_desc }}</view>
                  <view class="view">
                    <b-image class-name="icon" src="/static/images/material/icon_view.png" mode="aspectFit" :is-asset="true" />
                    {{ item.browse_num | formatNumber(2, true) }}
                  </view>
                </view>
              </view>
              <b-image class-name="img" :src="item.cover" mode="aspectFill" />
            </view>
          </template>
        </template>
      </view>
    </view>
  </base-page-view>
</template>
<script>

import moleRichText from '@/components/customModules/modules/moleRichText.vue'
import { h5NavigateTo } from '@/utils/navigateTo'
import './detail.scss'
export default {
  name: 'ArticleMaterialDetail',
  components: {
    moleRichText
  },
  data() {
    return {
      pid: '', // 顶级分类ID
      id: '', // 文章ID
      title: '', // 文章分类，显示为标题
      detailData: { // 文章详情
        content: ''
      },
      list: [] // 推荐列表
    }
  },
  computed: {},
  onLoad(options) {},
  onPullDownRefresh() {
    this.app_interactive_data()
  },
  methods: {
    app_interactive_data(options) {
      if (options) {
        this.pid = Number(options.pid || '')
        this.id = options.id || ''
        this.title = options.title || ''
        this.$setNavTitle(this.title)
      }
      if (this.id) {
        this.fetchData()
      }
      if (this.pid) {
        this.fetchRecommendData()
      }
    },
    // 获取详情
    async fetchData() {
      const res = await this.$api.materialApi.getMaterialDetail({ id: this.id })
      if (res.success && res.data) {
        this.detailData = res.data
        // this.$setNavTitle(this.detailData.title || '详情')
      }
      setTimeout(() => {
        uni.stopPullDownRefresh()
      }, 500)
    },
    // 获取推荐列表
    async fetchRecommendData() {
      const res = await this.$api.materialApi.getRecommendList({ category_id: this.pid, id: this.id, user_id: this.userInfo.uid })
      if (res.success) {
        this.list = res.data || []
      }
    },
    // 点击推荐文章
    async articleClick(item) {
      let res

      if (this.pid === 5) {
        // 商学院文章
        res = await this.$api.materialApi.toStudy({ id: item.id })
        if (res.success) {
          // 去学习成功
          item.study_status = 1
        }
      }
      // 数据统计："countType": "操作类型：1 ~ 分享统计，2 ~ 下载统计，3 ~ 浏览统计，4 ~ 复制统计,5 ~ 点赞统计",
      res = await this.$api.materialApi.materialCount({ count_type: 3, id: item.id, user_id: this.userInfo.uid })
      if (res.success) {
        // 浏览成功
        item.browse_num++
      }

      switch (item.content_type) {
        case 1:
          this.$navigateTo(`/pagesMaterial/article/detail?id=${item.id}&pid=${this.pid}`)
          break
        case 2:
          h5NavigateTo(item.content)
          break

        default:
          break
      }
    }
  }
}
</script>
